<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas{
            margin: 0 auto;
            display: block;
            border: 1px solid black;
        /*    background-image: url(../..);*/
       background: #000000;
            background-repeat: no-repeat;
            background-size: 500px 500px;

        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500px" height="500px">
        您的浏览器不支持canvas标签，请更换浏览器！！
    </canvas>    
    <script>
        window.onload = function(){
            var myCanvas = document.querySelector('#myCanvas');
            var paint = myCanvas.getContext('2d');

            //目标图像  你已经放置到画布上的绘图
            paint.beginPath();
            paint.fillStyle = 'red';
            paint.fillRect(0,0,500,500);

           
            paint.globalCompositeOperation = 'destination-out';

            //源图像  打算放到画布上的绘图
            paint.beginPath();
            paint.fillStyle = 'blue';
            myCanvas.onmousedown = function(e){
                paint.beginPath();
                paint.arc(e.clientX-myCanvas.offsetLeft,e.clientY-myCanvas.offsetTop,50,0,2*Math.PI,false);
                paint.fill();
                document.onmousemove = function(e){
                    paint.beginPath();
                    paint.arc(e.clientX-myCanvas.offsetLeft,e.clientY-myCanvas.offsetTop,50,0,2*Math.PI,false);
                    paint.fill();
                }
                document.onmouseup = function(){
                    document.onmousemove =null;
                }
                return false;

            }


        }
    </script>
</body>
</html>